<template>
  <div class="goods-info">
    <!-- 轮播图区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :imgList="goodsinfo.album" />
        </div>
      </div>
    </div>
    <transition
      @before-enter="beforeEnter"
      @enter="Enter"
      @after-enter="afterEnter"
    >
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <!-- 商品购买的区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsinfo.name }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            定价:<span>￥{{ goodsinfo.price }}</span>
          </p>
          <div v-if="goodsinfo.num">
            <!-- 加减数量的控件 -->
            <p class="go-num">
              <!-- 购买数量 -->
              <!-- @count 自定义函数触发 对应的处理函数 -->
              <numbox
                :max="goodsinfo.num"
                initcount="1"
                :goodsid="goodsinfo.id"
                @count="countChanged"
              ></numbox>
            </p>
            <p class="go-buy">
              <mt-button type="primary" size="small" @click="buy"
                >立即购买</mt-button
              >
              <mt-button type="danger" size="small" @click="addCar"
                >加入购物车</mt-button
              >
            </p>
          </div>
          <div v-else>该商品暂时无货</div>
        </div>
      </div>
    </div>
    <!-- 商品参数的区域 -->
    <!--商品参数-->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        内容区
        <div class="mui-card-content-inner">
          <p>商品卖点:{{ goodsinfo.sell_point }}</p>
          <p>库存情况:{{ goodsinfo.num }}件</p>
          <p>上架时间:{{ goodsinfo.create_time }}</p>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="mui-card-header">商品详情</div>
      <div class="mui-card-content good-desc">
        <div class="content" v-html="goodsinfo.content"></div>
      </div>
    </div>
  </div>
</template>
<script>
import swiper from "../../components/swiper.vue"; //导入
import numbox from "../../components/numbox.vue";
export default {
  //声明
  props: ["id"],
  components: {
    swiper,
    numbox,
  },
  data() {
    return {
      goodsinfo: {},
      selectedCount: 1,
      ballFlag: false,
    };
  },
  created() {
    this.getGoodsInfo();
  },
  methods: {
    getGoodsInfo() {
      //   console.log(this.id);
      this.$http
        .get("goodsinfo", { params: { id: this.id } })
        .then((res) => {
          // console.log(res.data);
          if (res.data.code === 0) {
            this.$toast(res.data.msg);
          } else if (res.data.code === 1) {
            if (res.data.data) {
              this.goodsinfo = res.data.data;
            } else {
              this.$toast("商品不存在");
            }
          }
        })
        .catch(() => {
          this.$toast("服务器异常,请求失败");
        });
    },
    countChanged(val) {
      this.selectedCount = val.count;
    },
    addCar() {
      this.ballFlag = !this.ballFlag;
      this.$store.commit("shopcart/addShopcart", {
        id: parseInt(this.id),
        count: this.selectedCount,
        selected: true,
      });
    },
    // 前 el 是动画的小盒子 小球
    beforeEnter(el) {
      el.style.transform = "translate(0,0)"; //每次进行动画之前 把小球的位置重置为0
    },
    // ing  done是一个函数 调用done函数时 表示动画结束
    Enter(el, done) {
      const ballPosition = this.$refs.ball.getBoundingClientRect(); //拿到小球的位置
      // 购物车的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      const distanceX = badgePosition.left - ballPosition.left; //购物车 水平距离小球的距离
      const distanceY = badgePosition.top - ballPosition.top; //垂直距离
      el.style.transform = "translate(" + distanceX + "px," + distanceY + "px)";
      //
      el.style.transition = "all.5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    // result
    afterEnter() {
      this.ballFlag = !this.ballFlag;
    },
    buy() {
      // 将当前的商品 和购买的数量 添加到 Vuex中的buy数组中
      this.$store.commit("shopcart/setBuy", {
        id: this.id,
        count: this.selectedCount,
        selected: true,
      });
      // 跳转到下订单的页面
      this.$router.push({ name: "order_create" });
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-info {
  background: #f1f1ff;
  overflow: hidden;
  .price {
    span {
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .go-buy {
    display: flex;
    margin: 10px 0 0px;
    justify-content: center;
    button {
      margin: 0 5px;
    }
  }
  .good-desc {
    background: #fff;
    padding: 5px;
    h3 {
      font-size: 16px;
      color: #226aff;
      text-align: center;
      margin: 15px 0;
    }
    .content {
      font-size: 14px;
      line-height: 28px;
      img {
        width: 100%;
      }
    }
  }
  .go-num {
    div {
      margin-left: 10px;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    background: red;
    z-index: 99;
    left: 132px;
    top: 390px;
    transform: translate(93px, 230px);
  }
}
</style>
